<template>
  <div class="app-container">
    <div class="baicInfo">
      <div>
        <div class="title">已选配送员</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="detail?.delivery"
          >
            <el-table-column label="工号" prop="userName" />
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="形象照" prop="personalImagePhoto">
              <template #default="scope">
                <el-image style="width: 50px; height: 50px" :src="scope.row.personalImagePhoto" fit="cover"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" link @click="handleRemove(scope.row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="form-container">
          <div class="title">可选配送员</div>
          <el-form style="margin-left: 20px" inline :model="CanParams" ref="refCan" class="form-line" label-width="120px">
            <el-form-item prop="name">
              <el-input size="small" v-model="CanParams.name" placeholder="姓名"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn-container">
            <el-button type="primary" link @click="handleRest(refCan as FormInstance)">重置</el-button>
            <el-button type="primary" link @click="handleSearch">查询</el-button>
          </div>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="CanList"
          >
            <el-table-column label="工号" prop="userName" />
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="形象照" prop="personalImagePhoto">
              <template #default="scope">
                <el-image style="width: 50px; height: 50px" :src="scope.row.personalImagePhoto" fit="cover"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" link @click="handleSelect(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            size="small"
            v-model:current-page="CanParams.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            layout="prev, pager, next"
            :total="pageTotal"
            @current-page-change="getCanList"
            :page-size="CanParams.pageSize"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="AccStationer">
import { TransitDetail, TransitDelivery } from "@/api/interface/city/cityTransit";
import {
  getCityTransitDeliveryListAPI,
  getCityTransitDetailAPI,
  relateCityTransitDeliveryAPI,
  unRelateCityTransitDeliveryAPI
} from "@/api/modules/city/cityTransit/api";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
let pageTotal = ref<number>(0);
const CanParams = ref<TransitDelivery.Params>({
  province: JSON.parse(localStorage.getItem("userInfo") as string).province,
  city: JSON.parse(localStorage.getItem("userInfo") as string).city,
  pageNum: 1,
  pageSize: 10,
  id: route.query.id as string
});
const refCan = ref<FormInstance>();
const CanList = ref<TransitDelivery.Row[]>([]);
const handleRest = (form: FormInstance) => {
  form.resetFields();
};
const handleSearch = () => {
  getCanList();
};
const handleRemove = (row: TransitDelivery.Row) => {
  ElMessageBox.confirm("是否移除", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      removeTransferStation(String(row.userId));
    })
    .catch(() => {
      console.log("cancel");
    });
};
const handleSelect = (row: TransitDelivery.Row) => {
  ElMessageBox.confirm("是否选择", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      console.log(row);
      selectTransferStation(String(row.userId));
    })
    .catch(() => {
      console.log("cancel");
    });
};
const getCanList = async () => {
  const { code, rows, msg, total } = await getCityTransitDeliveryListAPI(CanParams.value);
  if (code == "200" && rows) {
    CanList.value = rows;
    if (total) {
      pageTotal.value = total;
    }
  } else {
    ElMessage.error(msg);
  }
};
const removeTransferStation = async (id: string) => {
  const { code, msg } = await unRelateCityTransitDeliveryAPI({ id });
  if (code == "200") {
    ElMessage.success("成功");
    getCanList();
    handleDetail(Number(route.query.id));
  } else {
    ElMessage.error(msg);
  }
};
const selectTransferStation = async (userId: string) => {
  const { code, msg } = await relateCityTransitDeliveryAPI({ id: route.query.id as string, userId });
  if (code == "200") {
    ElMessage.success("成功");
    getCanList();
    handleDetail(Number(route.query.id));
  } else {
    ElMessage.error(msg);
  }
};
const detail = ref<TransitDetail.Data>();
const handleDetail = async (id: number) => {
  const { data } = await getCityTransitDetailAPI(id);
  if (data) {
    detail.value = data;
  }
};
onMounted(() => {
  if (route.query.id != undefined) {
    getCanList();
    handleDetail(Number(route.query.id));
  }
});
</script>

<style lang="scss" scoped>
body {
  .app-container {
    padding: 15px;
    padding-bottom: 50px;
    background-color: white;
  }

  font-size: 13px;
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
  .btn-container {
    text-align: right;
  }
}
.form-container {
  margin-bottom: 10px;
  background-color: white;
  .btn-container {
    display: inline-block;
  }
  .el-form {
    display: inline-block;
    ::v-deep .el-form-item__label {
      font-size: 13px;
    }
  }
  .form-line {
    .el-form-item {
      margin: 0;
      margin-right: 20px;
    }
    .el-input {
      width: 180px;
    }
    .el-select {
      width: 180px;
    }
  }
}
.title {
  display: inline-block;
  margin: 20px 0;
  vertical-align: middle;
}
.pagination-container {
  // display: inline-block;
  float: right;
  margin-top: 20px;
  background-color: white;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 200;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
